<template>
    <div class="tag-container">

        <!-- 查询表单 -->
        <div class="query-form-container">
            <el-form :inline="true" :model="querymodel" label-width="60px">

                <el-form-item label="类型" prop="class">
                    <el-input v-model="querymodel.confident.class" placeholder="请输入类型..." clearable
                        style="width: 200px"></el-input>
                </el-form-item>

                <el-form-item label="名称" prop="name">
                    <el-input v-model="querymodel.confident.name" placeholder="请输入名称..." clearable
                        style="width: 200px"></el-input>
                </el-form-item>

                <el-form-item label="状态" prop="status">
                    <dictselection v-model="querymodel.confident.status" classCode="system:Status" style="width: 200px">
                    </dictselection>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" icon="Search" @click="RefreshHander">
                        搜索
                    </el-button>
                    <el-button icon="Delete" @click="resetQueryHandler">
                        清空
                    </el-button>
                </el-form-item>
            </el-form>
        </div>



        <!-- 数据表格 -->
        <div class="table-container">
            <!-- 操作按钮 -->
            <div class="action-button-container">
                <el-row :gutter="5">
                    <el-col :span="1.5">
                        <el-button size="small" icon="Refresh" type="primary" plain @click="RefreshHander"> 刷新
                        </el-button>
                    </el-col>

                    <el-col :span="1.5">
                        <el-button size="small" icon="Plus" type="primary" plain @click="Addhandler"> 增加 </el-button>
                    </el-col>

                    <el-col :span="1.5">
                        <el-button size="small" icon="Edit" type="success" plain @click="editHandler"> 添加
                        </el-button>
                    </el-col>

                    <el-col :span="1.5">
                        <el-popconfirm title="delete this dict class ?" @confirm="delHandler">
                            <template #reference>
                                <el-button size="small" icon="Delete" type="danger" plain> 删除
                                </el-button>
                            </template>
                        </el-popconfirm>
                    </el-col>

                    <el-col :span="1.5">
                        <el-button size="small" icon="Download" type="warning" plain> 导出 </el-button>
                    </el-col>

                </el-row>
            </div>

            <el-table ref="clsTable" :data="classList.data" @current-change="currentClassChangedhandler" border
                style="width: 100%" highlight-current-row stripe>

                <el-table-column type="index" label="序号" width="60" align="center"></el-table-column>

                <el-table-column label="类型" align="center" width="150px" prop="class" :show-overflow-tooltip="true">
                    <template #default="scope">
                        <el-button link type="primary">{{ scope.row.class }}</el-button>
                    </template>
                </el-table-column>

                <el-table-column label="名称" align="center" width="150px" prop="name"
                    :show-overflow-tooltip="true"></el-table-column>

                <el-table-column label="说明" align="center" prop="description" width="150px"
                    :show-overflow-tooltip="true"></el-table-column>

                <el-table-column label="状态" align="center" width="80px" prop="status">
                    <template #default="{ row }">
                        <el-switch v-model="row.status" :active-value="1" :inactive-value="0"
                            @change="setStatus(row)"></el-switch>
                    </template>
                </el-table-column>

                <el-table-column label="创建时间" align="center" prop="createdAt" width="200px"
                    :show-overflow-tooltip="true"></el-table-column>

                <el-table-column label="创建人" align="center" prop="createdBy" width="100px"
                    :show-overflow-tooltip="true"></el-table-column>

                <el-table-column label="操作人" >
                    <template #default="scope">
                        <el-button link type="primary" icon="Edit" size="small"
                            @click="editHandler(scope.row)">修改</el-button>
                        <el-popconfirm title="是否删除" @confirm="delHandler(scope.row)">
                            <template #reference>
                                <el-button link type="primary" icon="Delete" size="small">删除</el-button>
                            </template>
                        </el-popconfirm>
                        
                    </template>
                </el-table-column>
            </el-table>

            <el-pagination size="small" style="margin-top:10px" :total="classList.pageCount || 0"
                :page-sizes="[10, 20, 30, 40]" :pager-count="5" :background="true" layout="prev, pager, next"
                v-model:current-page="querymodel.pageIndex" v-model:page-size="querymodel.pageSize"
                @change="RefreshHander">
            </el-pagination>

        </div>

        <!-- 数据表格 -->
        <div class="table-container">
            <!-- 操作按钮 -->
            <div class="action-button-container">
                <el-row :gutter="5">
                    <el-col :span="1.5">
                        <el-button size="small" icon="Refresh" type="primary" plain @click="getClassData"> 刷新
                        </el-button>
                    </el-col>
                    <el-col :span="1.5">
                        <el-button size="small" icon="Plus" type="primary" plain @click="AddClassData"> 增加 </el-button>
                    </el-col>
                </el-row>
            </div>

            <el-table :data="dataList" border style="width: 100%" stripe>
                <el-table-column type="index" label="序号" width="60" align="center"></el-table-column>
                <el-table-column label="代码" align="center" width="150px" prop="code"
                    :show-overflow-tooltip="true"></el-table-column>
                <el-table-column label="名称" align="center" width="150px" prop="name"
                    :show-overflow-tooltip="true"></el-table-column>
                <el-table-column label="说明" align="center" prop="description" width="150px"
                    :show-overflow-tooltip="true"></el-table-column>
                <el-table-column label="状态" align="center" width="80px" prop="status">
                    <template #default="{ row }">
                        <el-switch v-model="row.status" :active-value="1" :inactive-value="0"
                            @change="setDataStatus(row)"></el-switch>
                    </template>
                </el-table-column>
                <el-table-column label="默认值" align="center" prop="defaultValue" width="120px"
                    :show-overflow-tooltip="true"></el-table-column>

                <el-table-column label="序列" align="center" prop="sort" width="120px"
                    :show-overflow-tooltip="true"></el-table-column>

                <el-table-column label="创建时间" align="center" prop="createdAt" width="200px"
                    :show-overflow-tooltip="true"></el-table-column>

                <el-table-column label="创建人" align="center" prop="createdBy" width="100px"
                    :show-overflow-tooltip="true"></el-table-column>

                <el-table-column label="操作" >
                    <template #default="scope">
                        <el-button link type="primary" icon="Edit" size="small"
                            @click="editDataHandler(scope.row)">修改</el-button>
                        <el-popconfirm title="delete this dict class ?" @confirm="delDataHandler(scope.row)">
                            <template #reference>
                                <el-button link type="primary" icon="Delete" size="small">删除</el-button>
                            </template>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <el-dialog :title="form.title" v-model="form.open" width="500px" append-to-body center>
            <el-form ref="classFormRef" :model="form.data" :rules="form.rules" label-width="auto">

                <el-form-item label="类型:" prop="name">
                    <el-input v-model="form.data.name" placeholder="类型名称" clearable></el-input>
                </el-form-item>

                <el-form-item label="类型代码:" prop="class">
                    <el-input v-model="form.data.class" placeholder="类型代码" clearable></el-input>
                </el-form-item>

                <el-form-item label="状态:" prop="status">
                    <dictselection v-model="form.data.status" classCode="system:Status"></dictselection>
                </el-form-item>

                <el-form-item label="描述:" prop="description">
                    <el-input v-model="form.data.description" type="textarea"
                        placeholder="请输入说明信息"></el-input>
                </el-form-item>

            </el-form>

            <template #footer>
                <div class="dialog-footer">
                    <el-button icon="CircleCheck" type="primary" @click="submitForm">确 定</el-button>
                    <el-button icon="CircleClose" @click="cancel">取 消</el-button>
                </div>
            </template>
        </el-dialog>


        <el-dialog :title="dataform.title" v-model="dataform.open" width="500px" append-to-body center>
            <el-form ref="dataFormRef" :rules="dataRules" :model="dataform.data" label-width="auto">

                <el-form-item label="代码:" prop="code">
                    <el-input-number v-model="dataform.data.code" :min="0" :max="100" clearable 
                        ></el-input-number>
                </el-form-item>

                <el-form-item label="名称:" prop="name">
                    <el-input v-model="dataform.data.name" placeholder="名称" clearable ></el-input>
                </el-form-item>

                <el-form-item label="类型:">
                    <el-input disabled clearable v-model="currentRow.name" >
                    </el-input>
                </el-form-item>

                <el-form-item label="状态:" prop="status">
                    <dictselection v-model="dataform.data.status" classCode="system:Status"></dictselection>
                </el-form-item>

                <el-form-item label="是否默认:" prop="defaultValue">
                    <el-checkbox v-model="dataform.data.defaultValue">默认值</el-checkbox>
                </el-form-item>

                <el-form-item label="序列:" prop="sort">
                    <el-input-number v-model="dataform.data.sort" :min="1" :max="100"></el-input-number>
                </el-form-item>

                <el-form-item label="说明:" prop="description">
                    <el-input v-model="dataform.data.description" type="textarea" placeholder="说明信息" clearable
                        ></el-input>
                </el-form-item>
            </el-form>

            <template #footer>
                <div class="dialog-footer">
                    <el-button icon="CircleCheck" type="primary" @click="submitDataForm">确 定</el-button>
                    <el-button icon="CircleClose" @click="cancelDataForm">取 消</el-button>
                </div>
            </template>

        </el-dialog>


    </div>
</template>

<script setup>


import dictselection from '@/components/DictExtend/DictSelection.vue';
import usedictStore from '@/store/app/dict';
import msgHelper from '@/util/msgHelper.js'

import { computed, onMounted, reactive, ref } from 'vue';
import dictApi from '@/api/system/dict';

const dictStore = usedictStore();

const { proxy } = getCurrentInstance();
const classList = ref([]);
let dataList = ref([]);
const form = ref({});
const currentRow = ref({ name: "" });
const dataform = ref({
    title: "Init",
    open: false,
    data: {
        code: undefined,
        name: undefined,
        description: undefined,
        status: 0,
        defaultValue: true,
        sort: 1,
        classId: undefined,
        version: undefined,
        createdAt: undefined,
        createdBy: undefined
    }
});

const sysStatuDict = ref([]);

onMounted(async () => {
    const res = await dictStore.getStatusDict();
    if (res.data && res.data.data) {
        sysStatuDict.value = res.data.data;
    }
});

function dataFormReset() {
    dataform.value = {
        title: "type",
        open: false,
        data: {
            code: undefined,
            name: undefined,
            description: undefined,
            status: 0,
            defaultValue: true,
            sort: 1,
            classId: undefined,
            version: undefined,
            createdAt: undefined,
            createdBy: undefined
        }
    };
}

const dataRules = {
    code: [{ required: true, message: "代码", trigger: "blur" }],
    name: [{ required: true, message: "名称", trigger: "blur" }],
};

function reset() {
    form.value = {
        title: "type",
        open: false,
        data: {
            class: undefined,
            name: undefined,
            description: undefined,
            status: 0,
            id: undefined
        },
        rules: {
            class: [{ required: true, message: "请输入类名 ", trigger: "blur" }],
            name: [{ required: true, message: "请输入名称", trigger: "blur" }],
        }
    };
}

let querymodel = reactive(
    {
        pageIndex: 1,
        pageSize: 10,
        confident: {
            class: "",
            name: "",
            description: "",
            status: undefined
        }
    }
)

function RefreshHander() {
    dictApi.listdict(querymodel).then(res => {
        if ( res.data.success) {
            classList.value = res.data.data;
        }
    })
}

function Addhandler() {
    reset();
    form.value.open = true;
    form.value.title = "增加";
}

function cancel() {
    form.value.open = false;
}

function submitForm() {

    proxy.$refs.classFormRef.validate((valid) => {
        if (valid) {
            if (form.value.data.id) {
                dictApi.updatedict(form.value.data).then(res => {
                    if (res.data.success) {
                        form.value.open = false;
                        msgHelper.show("修改成功!")
                        RefreshHander();
                    }
                    else {
                        msgHelper.showError("修改失败!" + res.data.msg)
                    }
                })
            }
            else {
                dictApi.adddcit(form.value.data).then(res => {
                    if (res.data.success) {
                        form.value.open = false;
                        msgHelper.show("修改成功!")
                        RefreshHander();
                    }
                    else {
                        msgHelper.showError("修改失败!" + res.data.msg)
                    }
                })
            }
        } else {
            msgHelper.showWarn("请填写正确的值!");

        }
    });


}

function resetQueryHandler() {
    querymodel.confident = {
        class: "",
        name: "",
        description: "",
        status: undefined
    }
}

function editHandler(row) {
    var id = row.id || currentRow.value.id;
    if (!id) return;
    reset();
    dictApi.getDictById({ id: id }).then(res => {
        if (res.data.success) {
            form.value.data = res.data.data;
            form.value.open = true;
            form.value.title = "编辑";
        }
        else {
            msgHelper.showError("数据有变动，请刷新重试!");
        }
    })
}

function delHandler(row) {
    var id = row.id || ids.value[0];
    if (!id) return;
    msgHelper.showWarn("暂不支持！");
}

function setStatus(row) {

    dictApi.setClassStatus({ id: row.id, status: row.status, version: row.version }).then(res => {
        if (res.data.success) {
            msgHelper.show("操作成功!");
            RefreshHander();
        }
        else {
            msgHelper.showError("操作失败!" + res.data.msg);
        }
    })
}

function currentClassChangedhandler(val) {
    currentRow.value = val;
    getClassData();
}

function getClassData(data) {
    dataList.value = [];
    if (!currentRow.value) return;
    if (!currentRow.value.id) return;
    let id = currentRow.value.id || data;
    if (id) {
        dictApi.getData({ id: id }).then(res => {
            if (res.data.success) {
                dataList.value = res.data.data;
            }
        })
    }
}

function editDataHandler(row) {
    dictApi.getDataById({ id: row.id }).then(res => {
        if (res.data.success) {

            dataform.value.data = res.data.data;
            dataform.value.open = true;
            dataform.value.title = "编辑数据";

        }
        else {
            msgHelper.showError("数据有变动，请刷新重试!");
        }
    })
}

function delDataHandler(row) {

}

function setDataStatus(row) {

    dictApi.setCodeStatus({ id: row.id, status: row.status, version: row.version }).then(res => {
        if (res.data.success) {
            getClassData();
            msgHelper.show("操作成功!");
        }
        else {
            msgHelper.showError("操作失败!" + res.data.msg);
        }
    })
}


function AddClassData() {

    if (!currentRow) return;
    if (!currentRow.value.id) return;

    dataFormReset();
    dataform.value.open = true;
    dataform.value.title = "增加";
    dataform.value.data.classId = currentRow.value.id;

}
function submitDataForm() {
    proxy.$refs.dataFormRef.validate((valid) => {
        if (valid) {
            if (dataform.value.data.id) {
                dictApi.updateData(dataform.value.data).then(res => {
                    if (res.data.success) {
                        msgHelper.show("修改成功!");
                        dataform.value.open = false;
                        getClassData();
                    }
                })
            }
            else {
                dictApi.addData(dataform.value.data).then(res => {
                    if (res.data.success) {
                        msgHelper.show("修改成功!");
                        dataform.value.open = false;
                        getClassData();
                    }
                })
            }
        } else {
            msgHelper.showError("请填写正确的值!");
        }
    });

}
function cancelDataForm() {
    dataform.value.open = false;
    dataFormReset();
}
</script>

<style scoped></style>